<template name="home">
	<view>
		<scroll-view class="page">
			<!-- 轮播 -->
			<swiper class="screen-swiper square-dot" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000"
			 duration="500" :style="[{animation: 'show 0.2s 1'}]">
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
					<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
				</swiper-item>
			</swiper>
			<!-- 项目start -->
			<view class=" bg-white grid col-3 padding-sm App">
				<view class="padding-sm animation-slide-bottom" :style="[{animationDelay: (index + 1)*0.1 + 's'}]" v-for="(item,index) in usList"
				 :key="index" @tap="goPage(item)">
					<view class="padding radius text-center shadow-blur solid-right ">
						<view class="cu-avatar lg ss" :style="{background: 'url(' + item.picture + ') no-repeat'}">
						</view>
						<view class="text-sm margin-top">{{item.appmodelName}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: 'home',
		data() {
			return {
				swiperList: [{
						id: 1,
						type: 'image',
						url: '/static/banner/banner1.png',
						link: ''
					},
					{
						id: 2,
						type: 'image',
						url: '/static/banner/banner2.png',
						link: ''
					},
					{
						id: 3,
						type: 'image',
						url: '/static/banner/banner3.png',
						link: ''
					},
				],
				usList: [],
			}
		},
		mounted() {
			this.getAPPmodular();
		},
		methods: {
			goPage(page) {
				let pages = page.route
				console.log(page.route)
				if (!pages) {
					return false;
				}
				uni.setStorageSync('affairType', page.appmodelName)
				this.$Router.push({
					name: pages
				})
			},
			// 主数据—APP功能模块查询
			getAPPmodular() {
				var compare = function compare(property) {
					return function(a, b) {
						var value1 = a[property];
						var value2 = b[property];
						return value1 - value2;
					}
				}
				this.$http.get('mesapi/mesapp/appfunctionList').then(res => {
					if (res.data.success) {
						this.usList = res.data.result;
						console.log(this.usList)
						this.usList = this.usList.sort(compare('appmodelCode'))
					} else {
						// this.$tip.error(res.data.message)
            this.modal.show({ type:'error', content:res.data.message })
					}
				})
			},
		}
	}
</script>

<style>
	.line2-icon {
		width: 60px;
		height: 60px;
	}

	page {
		background-color: white;
	}

	.ss {
		background-size: 100% !important;
	}

	.page {
		margin-bottom: 100rpx;
	}
	.App{
		margin-bottom: 40rpx;
	}
</style>
